<template>
  <div style="width: 100%">
    <el-table
      :data="
        data.specialArr.slice(
          (data.currentPage - 1) * data.pagesize,
          data.currentPage * data.pagesize
        )
      "
      style="width: 100%"
      class="tabletitel"
    >
      <el-table-column label="商家" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-image :src="scope.row.shopImg" class="image" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="merchantsName" label="商家名称" width="180" />
      <el-table-column prop="shopName" label="套餐种类" width="180" />
      <el-table-column prop="foodNumber" label="总量" width="180" />
      <el-table-column prop="foodleftnum" label="已销售量" width="180" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="delectSpecial(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="data.total"
      @current-change="currentShowPage"
    />
  </div>
</template>

<script lang="ts">
import { onMounted, reactive } from "@vue/runtime-core";
import { ElMessage } from "element-plus";
import axios from "axios";
export default {
  setup() {
    const data = reactive({
      specialArr: [],
      total: 20,
      pagesize: 5,
      currentPage: 1,
    });

    let currentShowPage = (curPage: any) => {
      data.currentPage = curPage;
    };

    onMounted(() => {
      axios.get("http://120.76.246.120:4455/Sapi/special").then((res) => {
        if (res.data.code === 200) {
          data.specialArr = res.data.data;
        } else {
          ElMessage({
            message: "网络请求超时!!!",
            type: "warning",
          });
        }
      });
    });

    const delectSpecial = (id: number): any => {
      axios({
        method: "post",
        url: "http://120.76.246.120:4455/Sapi/delspecial",
        data: { id },
      }).then((_) => {
        ElMessage("删除成功...");
        window.location.reload()
      });
    };

    return {
      data,
      delectSpecial,
      currentShowPage,
    };
  },
};
</script>

<style>
.tabletitel {
  margin-top: 50px;
}
.image {
  border-radius: 5px;
}
</style>